<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '新天琴商城',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1">
      <view class="w-full h-full p-x-28 home-content pos-relative">
        <view class="w-full hr-472 pos-absolute pos-top-0 pos-left-0 z--1">
          <image :width="'100%'" :height="'100%'" :src="headBg" />
        </view>
        <wd-navbar>
          <template #title>
            <text class="text-gray-333 font-size-36 font-500">新天琴商城</text>
          </template>
        </wd-navbar>
        <view class="mg-b-32" @click="toSearchPage">
          <wd-search
            placeholder-left
            disabled
            light
            hide-cancel
            placeholder="请输入搜索内容"
            custom-class="search"
          />
        </view>
        <view class="mg-b-40 hr-300" @click="goLoginPage">
          <view class="w-full h-full">
            <wd-swiper
              :list="swiperList"
              :height="150"
              :autoplay="swiperList.length > 0"
              @click="swiperClick"
            ></wd-swiper>
          </view>
        </view>
        <view class="flex flex-wrap justify-between mg-b-40">
          <view
            class="flex justify-center flex-col"
            v-for="(item, index) in homeMenuList"
            :key="index"
            @click="menuToPage(item)"
          >
            <view
              class="wr-112 hr-112 flex justify-center flex-items-center menu-item overflow-hidden"
            >
              <image width="100%" height="100%" radius="56rpx" class="bg-blue-1" :src="item.pic" />
            </view>
            <view class="text-center mg-t-22 font-size-28">
              <text>{{ item.title }}</text>
            </view>
          </view>
        </view>
        <!-- 图片集合 -->
        <view class="flex justify-between mg-b-40" v-if="flashSale">
          <view class="wr-336 hr-236" v-for="(item, index) in homeImages" :key="index">
            <image width="100%" height="100%" :src="item.pic" />
          </view>
        </view>
        <!-- 现实秒杀 -->
        <view class="flex justify-between mg-b-32" v-if="flashSale">
          <view class="flex justify-center flex-items-center">
            <view class="font-size-32">限时秒杀</view>
            <view class="font-size-24 main-title-color mx-2">|</view>
            <view class="font-size-24 main-title-color">{{ flashSale.name }}</view>
          </view>
          <view class="flex justify-center flex-items-center">
            <view class="font-size-24 main-title-color mg-r-12">仅剩</view>
            <view>
              <wd-count-down :time="flashSale.timeDown">
                <template #default="{ current }">
                  <span class="custom-count-down">
                    {{
                      current.hours + current.days * 24 < 10
                        ? '0' + (current.hours + current.days * 24)
                        : current.hours + current.days * 24
                    }}
                  </span>
                  <span class="custom-count-down-colon">:</span>
                  <span class="custom-count-down">
                    {{ current.minutes < 10 ? '0' + current.minutes : current.minutes }}
                  </span>
                  <span class="custom-count-down-colon">:</span>
                  <span class="custom-count-down">
                    {{ current.seconds < 10 ? '0' + current.seconds : current.seconds }}
                  </span>
                </template>
              </wd-count-down>
            </view>
          </view>
        </view>
        <!-- 产品 -->
        <view class="mg-b-40" v-if="flashSale" @click="toActivityProduct(flashSale.id, 1)">
          <view class="w-full hr-272">
            <image width="100%" height="100%" :src="flashSale?.pic" />
          </view>
          <view class="font-size-28 mg-t-28">{{ flashSale?.desp }}</view>
        </view>
        <view class="mg-b-32 flex justify-between" v-if="flashSale">
          <view class="flex justify-start items-center">
            <view class="font-size-24 text-red-1 line-height-none mg-r-8">秒杀价</view>
            <view class="font-size-24 text-red-1 line-height-none mg-r-4">¥</view>
            <view class="font-size-40 text-red-1 line-height-none mg-r-20">
              {{ flashSale?.price }}
            </view>
            <view class="flex justify-between font-size-24 text-gray-999 decoration-line-through">
              <view class="line-height-none">¥</view>
              <view class="line-height-none mr-2">{{ flashSale?.origin_price }}</view>
            </view>
          </view>
          <view class="text-gray-999 font-size-24">{{ flashSale?.storage }}件</view>
        </view>
        <view class="w-full mg-b-40 pos-relative">
          <view class="flex justify-start flex-items-center progress-box">
            <view class="progress-bar">
              <view class="progress-bar-inner" :style="{ width: progress + '%' }"></view>
            </view>
            <view class="font-size-24 line-height-none text-blue-1 mg-l-20">
              <view>已抢{{ progress }}%</view>
            </view>
            <view class="pos-absolute pos-right-0 pos-top-0 wr-138 hr-70">
              <image
                width="100%"
                height="100%"
                src="../../static/images/background/progress-bg.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>
        <!-- 标题 -->
        <view class="w-full flex justify-center items-center mg-b-32">
          <view class="wr-208 hr-18 flex justify-center items-center">
            <image width="100%" height="100%" :src="titleBg" />
          </view>
          <view class="font-size-32 mx-3">为你推荐</view>
          <view class="wr-208 hr-18 flex justify-center items-center title-bg-right">
            <image width="100%" height="100%" :src="titleBg" />
          </view>
        </view>
        <!-- 产品列表 -->
        <view class="mg-b-32">
          <view class="flex flex-wrap justify-between">
            <view
              class="flex justify-center flex-col mg-b-34 wr-336"
              v-for="(item, index) in productList"
              :key="index"
              @click="toProductDetail(item.id, 0)"
            >
              <view class="w-full hr-336">
                <image width="100%" height="100%" :src="item.pic" />
              </view>
              <view class="font-size-28 mg-t-20 text-truncate">{{ item.name }}</view>
              <view class="flex justify-between flex-items-end mg-t-20">
                <view class="flex justify-start flex-items-end font-size-36 mt-1 text-red-1">
                  <view class="line-height-none font-size-24 mg-r-6 mg-b-4">¥</view>
                  <view class="line-height-none">
                    {{ item.price }}
                  </view>
                </view>
                <view class="font-size-24 text-gray-999">已售{{ item.buy_count }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getHomePage, getRecommend } from '@/service/home/home'
import type { Recommend } from '@/service/home/home'
import PLATFORM from '@/utils/platform'

defineOptions({
  name: 'Home',
})
const headBg = ref('../../static/images/background/home-header.png')
const swiperList: Ref<any[]> = ref([])
const homeMenuList: Ref<any[]> = ref([])
const homeImages: Ref<any[]> = ref([])
const swiperClick = (e: any) => {
  console.log(e)
}
// 进度条
const progress: Ref<number> = ref(0)
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const titleBg: Ref<string> = ref('../../static/images/background/title-bg.png')
// 产品列表
const productList: Ref<Recommend[]> = ref()
const toProductDetail = (id: number, type: number) => {
  uni.navigateTo({ url: '/pages/shopping/details' + '?id=' + id })
}
const toActivityProduct = (id: number, type: number) => {
  uni.navigateTo({ url: '/pages/shopping/details' + '?id=' + id + '&type=' + type })
}
const goLoginPage = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}
const flashSale: any = ref(null)
onLoad(() => {})
onShow(() => {
  pageData()
})
const pageData = () => {
  getHomePage().then((res: any) => {
    if (res.code === 0) {
      const ad = res.data.ad
      const imgList: any = []
      ad.banner.forEach((el: any) => {
        imgList.push(el.pic)
      })
      swiperList.value = imgList
      homeMenuList.value = ad.nav
      homeImages.value = ad.ad
      if (res.data.flashSale) {
        flashSale.value = res.data.flashSale
        if (flashSale.value) {
          flashSale.value.timeDown =
            new Date(flashSale.value.flush_end_time).getTime() - new Date().getTime()
        }
        progress.value =
          Math.round((flashSale.value.buy_count / flashSale.value.storage) * 100) / 100
      } else {
        flashSale.value = null
      }
    }
  })
  getRecommend().then((res: any) => {
    productList.value = res.data.data
  })
}
const toSearchPage = () => {
  uni.navigateTo({ url: '/pages/shopping/list' })
}
const menuToPage = (item: any) => {
  console.log(item.link)
  if (item.link) {
    const objLink = JSON.parse(item.link)
    if (PLATFORM.platform === 'mp-weixin') {
      if (objLink.jump_weixin_mp_url) {
        uni.navigateTo({ url: objLink.jump_weixin_mp_url })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.main-title-color {
  color: #d14328;
}
.home-container {
  position: relative;
  z-index: 1;
}

.home-content {
  height: 100%;
  overflow: auto;
}
.menu-item {
  width: 112rpx;
  height: 112rpx;
  background: linear-gradient(180deg, #f6f2fe 0%, #ebebff 100%);
  border-radius: 56rpx;
}
.custom-count-down {
  display: inline-block;
  min-width: 44rpx;
  padding: 0 10rpx;
  color: #fff;
  text-align: center;
  background-color: #f03131;
  border-radius: 2px;
}

.custom-count-down-colon {
  display: inline-block;
  margin: 0 4px;
  color: #f0883a;
}
.activity-title {
  color: #333;
}
// .text-underline {
//   text-decoration: line-through;
// }
.progress-box {
  box-sizing: border-box;
  height: 70rpx;
  padding-left: 28rpx;
  background: #f1f0f8;
  border-radius: 16rpx;
}
.progress-bar {
  position: relative;
  width: 284rpx;
  height: 20rpx;
  background: #dae0f3;
  border-radius: 10rpx;
  &-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #7195f8;
    border-radius: 10rpx;
  }
}
.progress-font {
  color: #7195f8;
}
.title-bg-right {
  transform: rotateY(180deg);
}
::v-deep .wd-search {
  padding: 0 !important;
  background: rgba(255, 255, 255, 0) !important;
}
::v-deep .wd-swiper__track {
  border-radius: 0;
}
::v-deep .wd-navbar {
  background-color: transparent;
}
</style>
